<template>
	<view class="container11">
		<view class="content" ref="contentRef" :class="isExpand?'':'line-two'" :style="{color:textColor}">
			{{showText}}
			<span v-if="!isExpand && showExpand" @click="expandOrShrink" class="zhankaiTip1"
				:class="showExpand?'zhankaiTipShow':''">{{isExpand?'收起':'...展开全文'}}</span>
		</view>
		<view v-if="isExpand" @click="expandOrShrink" class="zhankaiTip" :class="showExpand?'zhankaiTipShow':''">
			{{isExpand?'收起':'展开'}}
		</view>

		<view class="content1" ref="contentRef1">
			{{text}}
		</view>

		<view class="content2" ref="contentRef1">
			{{text1}}
		</view>

	</view>
</template>
<script>
	export default {
		props: {
			text: {
				//文字
				type: String,
				default: "",
			},
			lineCount: {
				//行数
				type: Number,
				default: 10,
			},
			fontSize: {
				//传入字体大小（rpx）
				type: Number,
				default: 28,
			},
			color: {
				//文字和图标颜色
				type: String,
				default: "#1167FF",
			},
			direction: {
				//收起按钮-浮动方向-默认右浮动
				type: String,
				default: "right",
			},
		},
		data() {
			return {
				textColor: 'rgba(0,0,0,0)',
				isExpand: false, //是否展开
				showExpand: false, //是否显示展开收起按钮
				windowWidth: null, //屏幕宽度
				size: 12, //展开收起按钮大小-默认12

				showText: '',


				maxWidth: 100, // 最大宽度
				text1: '',
				textCount: 30,
				
				textOlder:''
			};
		},
		watch: {
			text() {
				if(this.text == this.textOlder){
					return
				}
				this.textOlder = this.text
				// 有数据且页面渲染完成
				this.$nextTick(async () => {
					this.textColor = 'rgba(0,0,0,0)'
					this.showExpand = false
					this.isExpand = false

					if (!this.windowWidth) {
						const res = await uni.getSystemInfo();
						// 获取屏幕宽度
						this.windowWidth = res[1].windowWidth;
						this.judgeExpand(this.lineCount, this.fontSize);
					} else {
						this.judgeExpand(this.lineCount, this.fontSize);
					}


				});
			},
		},
		mounted() {
			//若text数据一开始有值，则监听触发不了，所以在此进行处理
			if (this.text) {
				this.showExpand = false
				uni.getSystemInfo().then((res) => {
					// 获取屏幕宽度
					this.windowWidth = res[1].windowWidth;
					this.judgeExpand(this.lineCount, this.fontSize);
				});
			}
		},
		methods: {
			
			 
			

			// 点击展开/收起按钮
			expandOrShrink() {
				if (this.showExpand) {
					this.isExpand = !this.isExpand;
					if (this.isExpand) {
						this.showText = this.text

					} else {
						this.showText = this.text.slice(0, 31)
					}
				}

			},
			// 判断是否显示展开收起按钮
			judgeExpand(lineCount, fontSize) {
				// 行数 字体大小（rpx）
				let el = uni.createSelectorQuery().in(this).select('.content1');
				// 设置为0的定时器，解决小程序bug
				setTimeout(() => {
					el.boundingClientRect((res) => {
						const textHeight = res.height;
						const lineHeight = (fontSize * 1.5 * this.windowWidth) / 750;
						this.size = lineHeight > 42 ? 18 : 12;
						var showExpand =
							textHeight > lineCount * lineHeight + lineCount / 2 + 1;
						if (showExpand) {
							this.textCount = 30
							this.maxWidth = this.windowWidth * 850 / 750
							this.caclusTextLenght()

						} else {
							this.showText = this.text
							this.textColor = '#fff'
						}

					}).exec();
				}, 0);


			},

			caclusTextLenght() {
				this.text1 = this.text.slice(0, this.textCount)
				console.log('文本高度1=')
				setTimeout(res2=>{
					const query = uni.createSelectorQuery().in(this).select('.content2');
					query
						.boundingClientRect((data) => {
							console.log('文本高度',data.width)
							if (data.width < this.maxWidth) {
								this.textCount++
								this.caclusTextLenght()
								// this.showText = this.text.slice(0, this.textCount)
								// this.showExpand = true
								// this.textColor = '#fff'
							} else {
								this.showText = this.text.slice(0, this.textCount)
								this.showExpand = true
								this.textColor = '#fff'
							}
					}).exec();
					
				},200)

				
				
			}




		},
	};
</script>

<style lang="scss" scoped>
	.container11 {
		width: 555rpx;
		color: white;

		.content {
			width: 555rpx;
			overflow: hidden;
			/* 文本超出部分隐藏 */
			white-space: pre-wrap;
			font-size: 28rpx;
			line-height: 42rpx;
			/* 允许文本换行 */
		}

		.content1 {
			position: fixed;
			left: 0rpx;
			top: 0rpx;
			width: 555rpx;
			color: rgba(0, 0, 0, 0);
			font-size: 28rpx;
			line-height: 42rpx;
		}

		.content2 {
			position: fixed;
			left: 0rpx;
			top: 0rpx;
			color: rgba(0, 0, 0, 0);
			font-size: 28rpx;
			line-height: 42rpx;
			white-space: nowrap;
			max-width: 200vw;
		}

		.zhankaiTip1 {
			margin-left: 20rpx;
			font-size: 28rpx;
			color: rgba(0, 0, 0, 0);
			line-height: 42rpx;
		}



		.zhankaiTip {
			width: 100%;
			text-align: right;
			font-size: 28rpx;
			color: rgba(0, 0, 0, 0);
			line-height: 42rpx;
		}

		.zhankaiTipShow {
			color: rgb(153, 153, 153);
		}

		.line-two {
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;

			display: -moz-box;
			-moz-line-clamp: 2;
			-moz-box-orient: vertical;

			overflow-wrap: break-word;
			word-break: break-all;
			white-space: normal;
			overflow: hidden;
		}


	}
</style>